<template>
  <div>
    <h2>活动管理</h2>
    <button @click="showAddForm = true">添加活动</button>
    <button v-if="editActivityId" @click="cancelEdit">取消编辑</button>

    <div v-if="showAddForm || editActivityId">
      <h3>{{ editActivityId ? '编辑活动' : '添加活动' }}</h3>
      <form @submit.prevent="saveActivity">
        <div>
          <label>标题：</label>
          <input v-model="activity.title" />
        </div>
        <div>
          <label>日期：</label>
          <input v-model="activity.date" type="date" />
        </div>
        <div>
          <label>地点：</label>
          <input v-model="activity.location" />
        </div>
        <button type="submit">{{ editActivityId ? '更新' : '保存' }}</button>
      </form>
    </div>

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>标题</th>
          <th>日期</th>
          <th>地点</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="activity in activities" :key="activity.id">
          <td>{{ activity.id }}</td>
          <td>{{ activity.title }}</td>
          <td>{{ activity.date }}</td>
          <td>{{ activity.location }}</td>
          <td>
            <button @click="editActivity(activity.id)">编辑</button>
            <button @click="confirmDelete(activity.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { activities as initialActivities } from '../data/activities'

export default {
  data() {
    return {
      activities: JSON.parse(JSON.stringify(initialActivities)), // 深拷贝
      showAddForm: false,
      editActivityId: null,
      activity: {
        title: '',
        date: '',
        location: ''
      }
    }
  },
  methods: {
    checkAdminPermission() {
      const user = JSON.parse(localStorage.getItem('user'))
      if (!user || user.role !== 'admin') {
        alert('无访问权限')
        this.$router.push('/')
      }
    },
    saveActivity() {
      if (this.editActivityId) {
        // 编辑活动
        const index = this.activities.findIndex(a => a.id === this.editActivityId)
        if (index !== -1) {
          this.activities[index] = { ...this.activity, id: this.editActivityId }
          this.$message.success('更新成功')
        }
      } else {
        // 添加活动
        const newId = this.activities.length + 1
        this.activities.push({ ...this.activity, id: newId })
        this.$message.success('添加成功')
      }
      this.resetForm()
    },
    editActivity(id) {
      this.editActivityId = id
      const activity = this.activities.find(a => a.id === id)
      if (activity) {
        this.activity = { ...activity }
      }
    },
    cancelEdit() {
      this.editActivityId = null
      this.resetForm()
    },
    confirmDelete(id) {
      if (confirm('确定删除此活动吗？')) {
        this.deleteActivity(id)
      }
    },
    deleteActivity(id) {
      this.activities = this.activities.filter(a => a.id !== id)
      this.$message.success('删除成功')
    },
    resetForm() {
      this.activity = {
        title: '',
        date: '',
        location: ''
      }
      this.showAddForm = false
      this.editActivityId = null
    }
  },
  created() {
    this.checkAdminPermission()
  }
}
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
button {
  margin-right: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>